<div id="profileBloc">
  {% if user.is_authenticated %}
	<div data-role="collapsible" data-collapsed="false" data-theme='q' data-content-theme='j'id="isAuthentificated">
	    <h3>Welcome, <span id="profile-username">{{ user.username }}</span></h3>
	    <p>
	    <br/>
	    <button data-theme="g" onClick="logout()" > Deconnexion </button>
	    <br/>
	    <div id="getACouponBlocMessage">
	    </div>
	    <label for="nbCouponsToBuy">Choississez votre nombre de Coupons :</label>
	    <br/><br/>
	    <div id="nbCouponsSelect">
	      <select data-theme="g" name="selectChoice0" id="selectChoice0">
			     {% for price in priceTable %}
	           <option value="{{ price.id }}" 
	               {% if price.id == 76 %} selected {% endif %} >
	             {{ price.nbCoupon }} coupon(s) ({{ price.price }} EUR)
	           </option>
	         {% endfor %}
				</select>
	   </div>
	   <br/>

     
	    <button data-theme="g" id='checkoutButton'>
	      Obtenez vos Coupons
	    </button>
	    <br/>
	    <script id="getacouponTemplate" type="text/x-jquery-tmpl">
         Good! You're about to buy a coupon. Click here to buy it :
         <button onClick="buyDeal()"> Acheter Deal </button>
	    </script>
	    <div id="updateDealBoughtView"></div>
	    <br/>
  </div>
  {% else %}
  <div id="nonAuthentificated">
    <div class="connectBloc">
		  <div data-role="collapsible" data-collapsed="false" data-theme='q' data-content-theme='j'>
		    <h3>Connection rapide.</h3>
		    <p>
		      <img src="media/images/signInWithGoogle2.png" id='signInGoogle'
		          title="Sign in with Google" alt='Sign in with Google' 
		         onClick="window.location = '/easyGoogleConnect'"/>
		      <!--  <a onClick="window.location='{{logoutGoogleUrl}}'">Helper: Logout google Url</a> -->
		    </p>
		  </div>
		</div>
  	<div class="connectBloc">
			<div data-role="collapsible" data-collapsed="false" data-theme='q' data-content-theme='j'>
			  <h3>Déjà inscrit ?</h3>
			   <p>
			     <form id="signInForm">
			     <input type='text' name="username" id="usernameInput" value="john" />
			     <input type='password' name="password" id="passwordInput" value="password" />
			     <button onClick="login()"> Sign in </button>
			   </form>
			   </p>
      </div>
    </div>
      
    <div class="connectBloc">
			<div data-role="collapsible" data-collapsed="false" data-theme='q' data-content-theme='j'>
		    <h3>Inscrivez-vous</h3>
		    <p>
		      <div id="CreateAccountBloc">
			      <form id="CreateAccountForm">
			        <input type='text' name="username" id="newUsernameInput" placeholder='username' value="timmy" />
			        <input type='text' name="mail" id="newMailInput" value="timmy@gmail.com" />
			        <input type='password' name="password" id="newPasswordInput" value="password" />
			        <input type='password' name="password2" id="newPasswordInput2" value="password" />
			        <button onClick="createAccount()"> Create </button>
			      </form>
		      </div>
		    </p>
		    </div>
    </div>
	</div>
	{% endif %}
</div>